<!--
    @license
    Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-menu/core-submenu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/core-icons/hardware-icons.html">


<polymer-element name="docs-menu" attributes="ajaxify coreElements paperElements versionPrefix" relative>
<template>
  <link rel="stylesheet" href="../../css/elements/docs-menu.css">
  <core-menu id="mainmenu" on-click="{{onClick}}" selectedItem="{{item}}" fit>

    <core-submenu id="gettingstartedmenu" label="Getting Started (0.5)" icon="social:school" class="start">
      <core-item label="Get the code" id="getcode"><a href="/[[versionPrefix]]/docs/start/getting-the-code.html"></a></core-item>
      <core-item label="Polymer in 10 minutes"><a href="/[[versionPrefix]]/docs/start/creatingelements.html"></a></core-item>
      <!-- <core-item label="Your first Polymer app"><a href="/[[versionPrefix]]/docs/start/tutorial/intro.html"></a></core-item> -->
      <core-submenu label="Your first Polymer app" icon="hardware:keyboard-arrow-down">
        <core-item label="Getting the starter project"><a href="/[[versionPrefix]]/docs/start/tutorial/intro.html"></a></core-item>
        <core-item label="Step 1: Creating the app structure"><a href="/[[versionPrefix]]/docs/start/tutorial/step-1.html"></a></core-item>
        <core-item label="Step 2: Your own element"><a href="/[[versionPrefix]]/docs/start/tutorial/step-2.html"></a></core-item>
        <core-item label="Step 3: Using data binding"><a href="/[[versionPrefix]]/docs/start/tutorial/step-3.html"></a></core-item>
        <core-item label="Step 4: Finishing touches"><a href="/[[versionPrefix]]/docs/start/tutorial/step-4.html"></a></core-item>
      </core-submenu>
      <core-item label="Understanding Polymer"><a href="/[[versionPrefix]]/docs/start/everything.html"></a></core-item>
      <core-submenu label="Understanding web components" icon="hardware:keyboard-arrow-down">
        <core-item label="About custom elements"><a href="/[[versionPrefix]]/platform/custom-elements.html"></a></core-item>
        <core-item label="About shadow DOM"><a href="/[[versionPrefix]]/platform/shadow-dom.html"></a></core-item>
        <core-item label="About HTML imports"><a href="/[[versionPrefix]]/platform/html-imports.html"></a></core-item>
        <core-item label="About web animations"><a href="/[[versionPrefix]]/platform/web-animations.html"></a></core-item>
        <core-item label="Web components polyfills"><a href="/[[versionPrefix]]/docs/start/platform.html"></a></core-item>
      </core-submenu>
    </core-submenu>

    <!-- <core-item label="The platform"><a href="/[[versionPrefix]]/docs/start/platform.html"></a></core-item> -->
     <!--  <core-submenu id="platformmenu" label="Platform" class="platform" icon="polymer">
        <core-item label="Custom Elements"><a href="/[[versionPrefix]]/platform/custom-elements.html"></a></core-item>
        <core-item label="Shadow DOM"><a href="/[[versionPrefix]]/platform/shadow-dom.html"></a></core-item>
        <core-item label="HTML Imports"><a href="//[[versionPrefix]]platform/html-imports.html"></a></core-item>
        <core-item label="Web Animations"><a href="/[[versionPrefix]]/platform/web-animations.html"></a></core-item>
      </core-submenu> -->

    <core-submenu id="coremenu" label="Guides &amp; Resources (0.5)" icon="description" class="guide">
      <core-item label="API developer guide"><a href="/[[versionPrefix]]/docs/polymer/polymer.html"></a></core-item>
      <core-submenu label="Data binding" icon="hardware:keyboard-arrow-down">
        <core-item label="Overview"><a href="/[[versionPrefix]]/docs/polymer/databinding.html"></a></core-item>
        <core-item label="Types of bindings"><a href="/[[versionPrefix]]/docs/polymer/binding-types.html"></a></core-item>
        <core-item label="Expressions"><a href="/[[versionPrefix]]/docs/polymer/expressions.html"></a></core-item>
        <core-item label="Compatibility notes"><a href="/[[versionPrefix]]/docs/polymer/databinding-compat.html"></a></core-item>
        <core-item label="Advanced topics"><a href="/[[versionPrefix]]/docs/polymer/databinding-advanced.html"></a></core-item>
        <core-submenu label="Related libraries" icon="hardware:keyboard-arrow-down">
          <core-item label="Template Binding"><a href="/[[versionPrefix]]/docs/polymer/template.html"></a></core-item>
          <core-item label="Node.bind()"><a href="/[[versionPrefix]]/docs/polymer/node_bind.html"></a></core-item>
        </core-submenu>
      </core-submenu>
      <core-item label="Polymer helper methods"><a href="/[[versionPrefix]]/docs/polymer/helpers.html"></a></core-item>
      <core-item label="Layout attributes"><a href="/[[versionPrefix]]/docs/polymer/layout-attrs.html"></a></core-item>
      <core-item label="Styling elements"><a href="/[[versionPrefix]]/docs/polymer/styling.html"></a></core-item>
      <core-item label="Touch &amp; gestures"><a href="/[[versionPrefix]]/docs/polymer/touch.html"></a></core-item>
      <core-item label="Debugging tips and tricks"><a href="/[[versionPrefix]]/docs/polymer/debugging.html"></a></core-item>
      <core-submenu label="Packaging and distribution" icon="hardware:keyboard-arrow-down">
        <core-item label="Creating reusable elements"><a href="/[[versionPrefix]]/docs/start/reusableelements.html"></a></core-item>
      </core-submenu>
      <!-- <core-item label="Runtime configuration"><a href="/[[versionPrefix]]/docs/polymer/runtime-config.html"></a></core-item> -->
      <core-item id="articles" label="Articles"><a href="/[[versionPrefix]]/articles/"></a></core-item>
      <core-item label="Videos"><a href="/[[versionPrefix]]/resources/video.html"></a></core-item>
      <core-item label="Community"><a href="/[[versionPrefix]]/resources/discuss.html"></a></core-item>
       <core-submenu label="Resources" icon="hardware:keyboard-arrow-down">
        <core-item label="Tools &amp; testing"><a href="/[[versionPrefix]]/resources/tooling-strategy.html"></a></core-item>
        <core-item label="Browser compatibility"><a href="/[[versionPrefix]]/resources/compatibility.html"></a></core-item>
        <core-item label="Releases"><a href="/[[versionPrefix]]/resources/changelog.html"></a></core-item>
        <core-item label="FAQ"><a href="/[[versionPrefix]]/resources/faq.html"></a></core-item>
      </core-submenu>
    </core-submenu>

    <core-submenu label="Elements (0.5)" icon="polymer" class="elements">
      <core-submenu label="Element guides" icon="hardware:keyboard-arrow-down">
        <core-item label="Using elements"><a href="/[[versionPrefix]]/docs/start/usingelements.html"></a></core-item>
        <core-item label="Using layout elements"><a href="/[[versionPrefix]]/docs/elements/layout-elements.html"></a></core-item>
        <core-item label="Using core icons"><a href="/[[versionPrefix]]/docs/elements/icons.html"></a></core-item>
        <core-item label="Using core list"><a href="/[[versionPrefix]]/docs/elements/core-list-guide.html"></a></core-item>
        <core-item label="Material design with Polymer"><a href="/[[versionPrefix]]/docs/elements/material.html"></a></core-item>
      </core-submenu>
      <core-submenu id="coreelements" label="Core elements" icon="hardware:keyboard-arrow-down">
        <template repeat="{{el in coreElementsList}}">
          <core-item label="[[el.name]]"><a href="/{{versionPrefix}}/docs/elements/[[el.name]].html"
              data-href="/{{versionPrefix}}/docs/elements/[[el.name]].html"></a></core-item>
        </template>
      </core-submenu>
      <core-submenu id="paperelements" icon="hardware:keyboard-arrow-down" label="Paper elements">
        <template repeat="{{el in paperElementsList}}">
          <core-item label="[[el.name]]"><a href="/{{versionPrefix}}/docs/elements/[[el.name]].html"
              data-href="/{{versionPrefix}}/docs/elements/[[el.name]].html"></a></core-item>
        </template>
      </core-submenu>
    </core-submenu>

  </core-menu>
</template>
<script>
  Polymer({
    ajaxify: false,
    isReady: false,
    coreElements: {},
    paperElements: {},
    versionPrefix: '',
    created: function() {
      this.coreElementsList = [];
      this.paperElementsList = [];
    },
    domReady: function() {
      this.isReady = true;
      this.highlightItemWithCurrentURL();
    },
    coreElementsChanged: function() {
      for (var name in this.coreElements) {
        this.coreElementsList.push({name: name, url: this.coreElements[name]});
      }
    },
    paperElementsChanged: function() {
      for (var name in this.paperElements) {
        this.paperElementsList.push({name: name, url: this.paperElements[name]});
      }
    },
    highlightItemWithCurrentURL: function(opt_href) {
      var href = opt_href || location.pathname + location.hash;

      if (href.match(/\/articles\//)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.articles);
        return;
      } else if (href.match(/core-elements.html$/)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.coreelements);
        return;
      } else if (href.match(/paper-elements.html$/)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.paperelements);
        return;
      }

      // If href wasn't found, look for a corresponding data-href. This is hacky
      // but the first querySelector will fail because the elements' urls are
      // /<versionPrefix>/docs/elements/core-elements.html#{{name}}.
      var item = this.shadowRoot.querySelector('[href$="' + href + '"]');
      if (!item) {
        item = this.shadowRoot.querySelector('[data-href$="' + href + '"]');
      }

      if (item) {
        var submenu = item.parentElement;

        // Selected item is not a submenu. Keep it selected and quit early.
        if (submenu == this.$.mainmenu) {
          return;
        }

        if (submenu.parentElement && submenu.parentElement.localName == 'core-submenu') {
          do {
            submenu.parentElement.selected = submenu.parentElement.items.indexOf(submenu);
            submenu = submenu.parentElement;
          } while (submenu && submenu.localName == 'core-submenu');
        } else {
          this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(submenu);
        }
      }
    }
  });
</script>
</polymer-element>
